<template>
  <view class="precheck-page">
    <view class="steps">
      <view class="step" :class="{active: 1===currentStep}">
        <view class="circle">1</view>
        <view class="label">身份验证</view>
      </view>
      <view class="step-line"></view>
      <view class="step" :class="{active: 2===currentStep}">
        <view class="circle">2</view>
        <view class="label">环境检测</view>
      </view>
      <view class="step-line"></view>
      <view class="step" :class="{active: 3===currentStep}">
        <view class="circle">3</view>
        <view class="label">面试规则</view>
      </view>
    </view>
    <!-- 步骤1：身份验证 -->
    <view v-if="currentStep === 1" class="step-content">
      <view class="form-area">
        <input class="input" v-model="name" placeholder="请输入姓名" />
        <input class="input" v-model="phone" type="number" maxlength="11" placeholder="请输入手机号" />
      </view>
      <button class="next-btn" :disabled="!canNextId" :class="{disabled:!canNextId}" @click="goNext">下一步</button>
    </view>
    <!-- 步骤2：环境检测 -->
    <view v-if="currentStep === 2" class="step-content">
      <view class="face-area">
        <view class="face-tip">请确保您的脸部在框内</view>
        <view class="face-box">
          <view class="face-icon"></view>
        </view>
      </view>
      <view class="env-check">
        <view class="env-title">环境检测</view>
        <view class="env-list">
          <view v-for="(item, idx) in envList" :key="item.name" class="env-item">
            <view class="env-status-icon" :class="item.status"></view>
            <text class="env-label">{{item.label}}</text>
            <text class="env-status-text" :class="item.status">{{item.text}}</text>
          </view>
        </view>
      </view>
      <button class="next-btn" :disabled="!allChecked" :class="{disabled:!allChecked}" @click="goNext">下一步</button>
    </view>
    <!-- 步骤3：面试规则 -->
    <view v-if="currentStep === 3" class="step-content">
      <view class="rule-area">
        <view class="rule-title">面试须知</view>
        <view class="rule-list">
          <view>1. 请在安静、光线良好的环境下进行面试。</view>
          <view>2. 确保设备电量充足，网络连接稳定。</view>
          <view>3. 面试全程需开启摄像头和麦克风。</view>
          <view>4. 面试过程中请勿切换应用或浏览其他网页。</view>
          <view>5. 面试完成后可查看详细的评分和反馈。</view>
        </view>
      </view>
      <button class="next-btn" @click="goNext">开始面试</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 1,
      name: '',
      phone: '',
      envList: [
        { name: 'net', label: '网络连接', status: 'loading', text: '检测中' },
        { name: 'camera', label: '摄像头权限', status: 'loading', text: '检测中' },
        { name: 'mic', label: '麦克风权限', status: 'loading', text: '检测中' },
        { name: 'quiet', label: '环境安静度', status: 'loading', text: '检测中' },
        { name: 'light', label: '光线环境', status: 'loading', text: '检测中' },
        { name: 'face', label: '人脸识别', status: 'loading', text: '检测中' }
      ],
      allChecked: false
    }
  },
  computed: {
    canNextId() {
      return this.name && /^1\d{10}$/.test(this.phone);
    }
  },
  mounted() {
    // 身份验证通过后才检测环境
  },
  methods: {
    startCheck() {
      const results = [
        { status: 'success', text: '良好' },
        { status: 'success', text: '已授权' },
        { status: 'success', text: '已授权' },
        { status: 'success', text: '通过' },
        { status: 'success', text: '检测通过' },
        { status: 'success', text: '验证通过' }
      ];
      let idx = 0;
      const checkNext = () => {
        if (idx < this.envList.length) {
          this.$set(this.envList, idx, {
            ...this.envList[idx],
            ...results[idx]
          });
          idx++;
          setTimeout(checkNext, 800);
        } else {
          this.allChecked = true;
        }
      };
      setTimeout(checkNext, 800);
    },
    goNext() {
      if (this.currentStep === 1) {
        if (!this.canNextId) return;
        this.currentStep = 2;
        this.allChecked = false;
        // 重置环境检测状态
        this.envList = this.envList.map(item => ({ ...item, status: 'loading', text: '检测中' }));
        this.startCheck();
      } else if (this.currentStep === 2) {
        if (!this.allChecked) return;
        this.currentStep = 3;
      } else if (this.currentStep === 3) {
        uni.navigateTo({ url: '/pages/interviewing/interviewing' });
      }
    }
  }
}
</script>

<style scoped>
.precheck-page {
  min-height: 100vh;
  background: #f6f7fb;
  padding: 32rpx 24rpx 40rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.steps {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #bbb;
}
.step.active {
  color: #3a6cff;
}
.circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: #eee;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}
.step.active .circle {
  background: #3a6cff;
}
.label {
  font-size: 20rpx;
}
.step-line {
  width: 48rpx;
  height: 4rpx;
  background: #eee;
  margin: 0 8rpx;
  border-radius: 2rpx;
}
.step-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-area {
  width: 80vw;
  max-width: 600rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  margin-bottom: 40rpx;
}
.input {
  height: 48px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
  font-size: 16px;
  padding: 0 12px;
  margin-bottom: 8px;
  border-radius: 0;
  outline: none;
}
.input:focus {
  border-bottom: 1.5px solid #3a6cff;
}
.face-area {
  width: 100%;
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 0 24rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32rpx;
}
.face-tip {
  color: #3a6cff;
  font-size: 26rpx;
  margin-bottom: 16rpx;
}
.face-box {
  width: 180rpx;
  height: 180rpx;
  border: 2rpx dashed #b3cfff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f7ff;
}
.face-icon {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #b3cfff 0%, #3a6cff 100%);
  border-radius: 50%;
}
.env-check {
  width: 100%;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 20rpx;
  margin-bottom: 32rpx;
}
.env-title {
  font-size: 28rpx;
  color: #3a6cff;
  font-weight: bold;
  margin-bottom: 12rpx;
}
.env-list {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.env-item {
  display: flex;
  align-items: center;
  font-size: 22rpx;
}
.env-status-icon {
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  background: #eee;
  margin-right: 12rpx;
}
.env-status-icon.success {
  background: #3a6cff;
}
.env-status-icon.loading {
  background: #bbb;
}
.env-label {
  flex: 1;
}
.env-status-text.success {
  color: #3a6cff;
}
.env-status-text.loading {
  color: #bbb;
}
.rule-area {
  width: 100%;
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx 32rpx 24rpx;
  margin-bottom: 32rpx;
}
.rule-title {
  font-size: 28rpx;
  color: #3a6cff;
  font-weight: bold;
  margin-bottom: 18rpx;
}
.rule-list {
  color: #333;
  font-size: 22rpx;
  line-height: 2;
}
.next-btn {
  width: 100%;
  margin-top: 24rpx;
  font-size: 30rpx;
  font-weight: bold;
  height: 44px;
  background: #3a6cff;
  color: #fff;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(58,108,255,0.08);
}
.next-btn.disabled {
  background: #bbb;
  color: #fff;
}
</style> 